<template>
  <div>
    <el-form ref="form" :rules="rules" :model="sysNotice" label-width="110px" size="small">
      <el-form-item label="标题" prop="noticeTitle">
        <el-input v-model="sysNotice.noticeTitle" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="noticeType">
        <el-radio-group v-model="sysNotice.noticeType">
          <el-radio v-for="item in typeOptions" :key="item.dictValue" :label="item.dictValue">{{ item.dictLabel }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="sysNotice.status">
          <el-radio v-for="item in statusOptions" :key="item.dictValue" :label="item.dictValue">{{ item.dictLabel }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="内容" prop="noticeContent">
        <!--        <el-input type="textarea" v-model="sysNotice.noticeContent" placeholder="请输入内容" clearable></el-input>-->
        <div style="border: 1px solid gray">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 400px; overflow-y: hidden;"
            v-model="sysNotice.noticeContent"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="add">添加</el-button>
        <el-button type="warning" size="small" @click="sysNotice={status:0,noticeType:1}">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import sysNoticeApi from "@/api/system/sysNotice";
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

export default {
  name: "sys-notice-add",
  components: {
    Editor, Toolbar
  },
  data() {
    return {
      //保存的通知公告对象
      sysNotice: {status: 0, noticeType: 1},
      //通知公告状态的字典数据
      statusOptions: [],
      //通知公告类型的字典数据
      typeOptions: [],
      // 表单校验
      rules: {
        noticeTitle: [
          {required: true, message: "标题不能为空", trigger: "blur"}
        ],
        noticeContent: [
          {required: true, message: "内容不能为空", trigger: "blur"}
        ]
      },
      editor: null,
      toolbarConfig: {},
      editorConfig: {placeholder: '请输入内容...'},
      mode: 'default', // or 'simple'
    }
  },
  created() {
    this.getDataByType("sys_notice_status").then(res => {
      this.statusOptions = res.data;
    })
    this.getDataByType("sys_notice_type").then(res => {
      this.typeOptions = res.data;
    })
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    //保存
    add() {
      //触发表单验证
      this.$refs["form"].validate(valid => {
        if (valid) {
          sysNoticeApi.save(this.sysNotice).then(res => {
            this.$message.success(res.msg)
            this.$emit("after")
            this.$emit("close")
          })
        }
      })
    }
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
